<template>
  <div>
    <el-row type="flex" justify="space-around" class="c_top">
      <el-col :span="6">
        <p>
          <span>待生产(份)</span>
          <span>实时数据</span>
        </p>
        <div v-if="unproductList.length>0">
          <p class="num">
            <span v-for="item in unproductList" :key="item.id">{{item.hash.fromat}}</span>
          </p>
          <p class="num2">
            <span v-for="item in unproductList" :key="item.id">{{item.hash.num}}</span>
          </p>
        </div>
        <p v-else style="line-height: 60px;height: 60px;padding-left: 20%;color:#aaa;font-size:20px">
          暂无待生产订单
        </p>

        <p>待生产总量：<b>{{unproSum}}</b></p>
      </el-col>
      <el-col :span="6">
        <p>
          <span>已生产(份)</span>
          <span>实时数据</span>
        </p>
        <div v-if="productedList.length>0">
          <p class="num">
            <span v-for="item in productedList" :key="item.id">{{item.hash.fromat}}</span>
          </p>
          <p class="num2">
            <span v-for="item in productedList" :key="item.id">{{item.hash.num}}</span>
          </p>
        </div>
        <p v-else style="line-height: 60px;height: 60px;padding-left: 20%;color:#aaa;font-size:20px">
          暂无已生产订单
        </p>
        <p>已生产总量：<b>{{proSum}}</b></p>

      </el-col>
      <el-col :span="6">
        <p>
          <span>今日预定(份)</span>
          <span>昨日:<b>2%<i class="iconfont icon-shangsheng"></i></b></span>
        </p>
        <p style="line-height: 60px;height: 60px;padding-left: 20%;">{{unproSum+proSum}}</p>
        <p>更新时间：<b style="font-size:16px">{{newDate}}</b></p>
      </el-col>

    </el-row>
    <el-table :data="productList" v-loading="loading" style="width: 92%;margin: 0 auto">
      <el-table-column prop="hash.pname" label="名称">
      </el-table-column>
      <el-table-column prop="hash.fromat" label="规格">
      </el-table-column>
      <el-table-column prop="hash.num" label="数量" sortable>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ts: this.newStore(),
      newDate: '',
      unproductList: [],
      productedList: [],
    };
  },
  created() {
    this.getProductList();
    this.getnewDate();
  },
  computed: {
    unproSum() {
      let sum = 0;
      for (let i = 0; i < this.unproductList.length; i += 1) {
        sum += Number(this.unproductList[i].hash.num);
      }
      return sum;
    },
    proSum() {
      let sum = 0;
      for (let i = 0; i < this.productedList.length; i += 1) {
        sum += Number(this.productedList[i].hash.num);
      }
      return sum;
    },
  },
  methods: {
    getnewDate() {
      const date = new Date();
      const year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let H = date.getHours();
      let i = date.getMinutes();
      let s = date.getSeconds();
      if (H < 10) {
        H = `0${H}`;
      }
      if (i < 10) {
        i = `0${i}`;
      }
      if (s < 10) {
        s = `0${s}`;
      }
      if (month < 10) {
        month = `0${month}`;
      }
      if (day < 10) {
        day = `0${day}`;
      }
      this.newDate = `${year}-${month}-${day} ${H}:${i}:${s}`;
    },
    getProductList() {
      const req = {
        handle: '47EEC3EB7CDCBB51AB6E160D70E90142578A3E9390AE65D1347A1A716A3E2F359ED889CD1A3835FE',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.unproductList = ts.d.data.operation1;
        this.productedList = ts.d.data.operation2;
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.num
  display flex
  justify-content space-around
  span
    font-size 16px
    color rgb(102, 122, 123)
.num2
  display flex
  justify-content space-around
  span
    font-size 24px
.el-col
  padding: 20px 10px;
.c_top
  div
    background #fff
    margin 20px 0
    p
      height 30px
      line-height 30px
      margin-bottom 10px
      &:nth-child(1)
        color #aaa
        span
          &:first-child
            float left
          &:last-child
            float right
            color #26a2ff
            b
              color #409EFF
      &:nth-child(2)
        font-size 30px
      &:last-child
        padding-top 10px
        border-top 1px solid #ccc
        color #aaa
        b
          color black
          float right
          font-size 20px
</style>
